<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>上海蜗牛登录页面</title>
    <script th:src="@{/js/jquery-3.6.3.js}"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
          integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossOrigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
          integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
          crossOrigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
            crossOrigin="anonymous"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            width: 100vw;
            height: 100vh;
            position: relative;
            background: url(https://webimg.ziroom.com/c7963097-5f1b-488b-87c2-bb92642238a6.jpg) no-repeat fixed center/100% 100%;
        }


        .login {
            width: 360px;
            height: 290px;
            border: 3px solid white;
            border-radius: 15px; /* 圆角 */
            position: absolute;
            left: 80%;
            top: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            /* margin:auto; */
        }

        .h1 {
            font-size: 32px;
            line-height: 30px;
            font-weight: bold;
            color: #fa9111;
            padding: 10px 0;
            text-align: left;
            margin-left: 50px;
        }

    </style>
</head>
<body>
<div class="login">
    <h1 class="h1">立即委托</h1>
    <span>已有</span>
    <span style="color: orange ;font-size: 18px">4,895.027</span>
    <span>位业主委托</span>


    <form method="post" action="/ziroom_portal/owner/ownerLogin">
        <div class="container">
            <table>
                </p>
                <tr>
                    <span style="color: orange">输入手机号立即委托,没有注册将为您自动注册</span>
                </tr>
                </p>
                <tr>
                    <td>
                        <input type="text" class="form-control " id="phone" name="phone"
                               placeholder="请输入您的电话号码">
                    </td>
                    <td>
                        <button type="button" style="font-size: 12px" onclick="getVerifyCode()" class="btn btn-success">
                            获取验证码
                        </button>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="text" class="form-control " id="verifyCode" name="verifyCode"
                               placeholder="请输入验证码">
                    </td>
                    <td>
                        <button type="submit" style="font-size: 14px" class="btn btn-info">立即登录</button>
                    </td>
                </tr>
                <tr>
                    <td>
                        <img src="https://webimg.ziroom.com/031287a1-5ac8-4a1b-b3b0-7db7287f0a4c.png">
                    </td>
                </tr>
            </table>
        </div>
    </form>
</div>


</body>

<script>

    function getVerifyCode() {
        //-- ajax 发请求 通知后台发送邮件
        let phone = $("#phone").val()
        $.post("/ziroom_portal/owner/message", {"phone": phone}, function (response) {
            alert(response);
        })
    }


</script>

</html>
